<template>
    <view class="confirmOrder">
        <view class="goods_top">
        	<view class="left">
        		<image :src="info.cover" mode="aspectFill"></image>
        		<text>{{info.title}}</text>
        	</view>
        </view>
        <view class="main">
            <view class="line">
                <view>线下充值</view>
                <view><text>￥{{info.money}}</text>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="btn" @click="subRecharge()">确定</view>
        </view>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    export default {
        data() {
            return {
                info: {
                    money: 0,
                },
                formData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    payCode: '',
                },
            }
        },
        methods: {
            getInfo(){
                serve.request({
                	url: '/payorder/recharge/info',
                	data: _self.formData
                }).then(res => {
                	if(res.code != 200) {
                		uni.showToast({
                			title: res.message,
                			icon : 'none',
                			success:function(){ 
                				setTimeout(function () { 
                					common.jump("return_one");
                					return ;
                				}, 2000) 
                			} 
                		});
                		return;
                	}
                	_self.info = res.data;
                });
            },
            subRecharge() {
                serve.request({
                	url: '/payorder/recharge/sub-item',
                	data: _self.formData
                }).then(res => {
                	if(res.code != 200) {
                		uni.showToast({
                			title: res.message,
                			icon : 'none'
                		});
                		return;
                	}
                    uni.showModal({
                        title: '提示',
                        content: res.message,
                    	showCancel: false,
                    	success: function(res) {
                    		common.jump('index');
                    	}
                    });
                    
                });
            },
        },
        onLoad(options) {
            _self = this;
            _self.formData.payCode = options.payCode || 0;
            if (options.q) {
                console.info(options.q);
                var link = decodeURIComponent(options.q);
                var paramArr = link.split('=');
                console.info(paramArr);
                _self.formData.payCode = paramArr[1];
            }
            if (_self.formData.payCode == 0) {
                uni.showToast({
                    title: "错误的访问方式",
                    icon: 'none',
                    success() {
                        setTimeout(function() {
                            common.jump('index')
                        }, 2000)
                    }
                });
                return;
            }
            _self.getInfo();
        },
        onPullDownRefresh() {
            console.log('refresh');
            _self.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        .confirmOrder {
            padding-bottom: 124rpx !important;

            .bottom {
                padding-bottom: 12px !important;
            }
        }
    }
    .goods_top {
    	display: flex;
    	padding: 33rpx 30rpx 0rpx;
    	box-sizing: border-box;
    	justify-content: space-between;
    	align-items: center;
    		
    	.left {
    		font-size: 28rpx;
    		display: flex;
    		align-items: center;
    		color: #333333;
    		
    		image {
    			width:40rpx;
    			height:35rpx;
    			margin-right: 13rpx;
    		}
    		
    		text {
    			position: relative;
    			padding-right: 30rpx;
    		}
    		
    	}
    		
    	.right {
    		font-size: 32rpx;
    		display: flex;
    		align-items: center;
    		
    		image {
    			width: 27rpx;
    			height: 33rpx;
    			margin-right: 20rpx;
    		}
    		
    	}
    }
    .confirmOrder {
        padding-bottom: 100rpx;

        .bottom {
            position: fixed;
            z-index: 100;
            width: 100%;
            bottom: 0rpx;
            border-top: 1rpx rgba(235, 236, 240, 1) solid;
            align-items: center;
            display: flex;
            z-index: 10;
            box-sizing: border-box;
            padding-bottom: env(safe-area-inset-bottom);
            height: 100rpx;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 0px 0rpx rgba(235, 236, 240, 1);
            padding-left: 30rpx;
            font-size: 24rpx;
            color: rgba(60, 72, 104, 0.5);

            .btn {
                position: absolute;
                height: 100%;
                width: 100%;
                background: #EB5938;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                right: 0rpx;
            }
        }

        .main {
            border-bottom: 16rpx rgba(102, 102, 102, 0.05) solid;
            width: 100%;

            .line {
                position: relative;
                box-sizing: border-box;
                padding: 37rpx 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                color: #666666;
                border-bottom: 1rpx rgba(235, 236, 240, 1) solid;

                text {
                    color: #EB5938;
                    font-size: 32rpx;
                }

                .through {
                    color: #ccc;
                    text-decoration: line-through;
                }

                .jt {
                    position: absolute;
                    right: 10rpx;
                    top: 49rpx;
                    content: '';
                    border: 1rpx solid #CCCCCC;
                    border-width: 0 3rpx 3rpx 0;
                    padding: 6rpx;
                    transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                }

            }
        }
    }
</style>
